<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>菜单管理</span></div>
            <div>
              
            </div>
        </div>
        <div class="message">
            <p class="character">1.如果是增加用户，请选择按用户配置菜单；</p>
            <p class="character">2.如果是新增菜单，请选择按菜单配置用户； <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="radioButton">
            <el-radio v-model="radio" label="1" @change="chengType">按菜单配置用户</el-radio>
            <el-radio v-model="radio" label="2" @change="change">按用户配置菜单</el-radio>
        </div>
        <div class="content">
            <!-- 左侧 -->
            <div class="contnetLeft">
                <div v-if="radio==1">
                    <div style="margin-left:20px">
                        菜单列表
                    </div>
                    <div style="margin:30px 0 0 120px;width:300px;height:500px;overflow-x: hidden;">
                        <LeftTree :allMentList="allMentList" v-on:getMenuId="getMenuId"></LeftTree>
                    </div>
                </div>
                <div v-if="radio==2">
                    <div style="margin-left:40px">用户列表</div>
                  <div style="width:660px;margin:20px auto 0;">
                      <el-tabs v-model="activeName">
                        <el-tab-pane label="角色组" name="role">
                            <div style="margin:20px 0 0 20px">
                                <LeftTreeT :allRoleList="allRoleList" v-on:getRole="getRole"></LeftTreeT>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="用户组" name="user">
                            <el-input v-model="LeftSerch" placeholder="请输入内容" style="width:250px"></el-input>
                            <LeftTable :allUserTable="allUserTable" v-on:UserId="UserId"></LeftTable>
                                <div class="block">
                                    <el-pagination
                                    :page-sizes="[7]"
                                    :page-size="7"
                                    @current-change="handleCurrentChange"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total=LeftTotal>
                                    </el-pagination>
                                </div>
                        </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="contnetRight">
              <div v-if="radio==1">
                  <div style="margin-left:40px">用户列表</div>
                  <div style="width:660px;margin:20px auto 0;">
                      <el-tabs v-model="activeNames">
                        <el-tab-pane label="角色组" name="roles">
                            <div style="margin:20px 0 0 20px">
                                <RightTreeCheck :CheckRoleList="CheckRoleList" :checkRole="checkRole" :MenuId="MenuId"></RightTreeCheck>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="用户组" name="users">
                            <el-input v-model="RightSerch" placeholder="请输入内容" style="width:250px"></el-input>
                            <RightTableCheck :CheckUserList="CheckUserList" :checkUser="checkUser" :MenuId="MenuId"></RightTableCheck>
                                <div class="block">
                                    <el-pagination
                                    :page-sizes="[7]"
                                    :page-size="7"
                                    @current-change="RighthandleCurrentChange"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total=RightTotal>
                                    </el-pagination>
                                </div>
                        </el-tab-pane>
                    </el-tabs>
                  </div>
              </div>
              <div v-if="radio==2">
                  <div style="margin-left:40px">菜单列表</div>
                  <div style="width:800px;margin:40px 0 0 120px">
                     <RightTreeCheckT :allMentListCheck="allMentListCheck" :checkMenu="checkMenu" :checkRoleID="checkRoleID" :userIdCheck="userIdCheck"></RightTreeCheckT>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LeftTree from './component/LeftTree'
import RightTreeCheck from './component/RightTreeCheck'
import RightTableCheck from './component/RightTableCheck'
import LeftTable from './component/LeftTable'
import LeftTreeT from './component/LeftTreeT'
import RightTreeCheckT from './component/RightTreeCheckT'
import {allMenu,allRole,allUser,allMenucheck,allRolecheck,allUserCheck,RoleCheckMenu} from '@/api/jurisdiction'
import {delay} from '@/utils/publicMethod'

export default {
    name:'jurisdiction',
    data(){
        return{
            radio:'1',  //默认进来是选中按菜单配置用户
            activeName: 'role',  //右侧table切换
            activeNames:'roles',   //左侧table切换
            allMentList:[],  //左侧全部菜单
            allRoleList:[], //左侧全部角色
            allUserTable:[],   //左侧全部用户
            allMentListCheck:[],  //右侧勾选的菜单
            CheckRoleList:[],  //右侧勾选的角色列表
            CheckUserList:[],  //右侧勾选table 用户
            LeftSerch:'', //左侧搜索
            RightSerch:'', //右侧搜索
            LeftTotal:0, //左侧的table总数
            RightTotal:0,  //右侧table总数
            // 勾选
            checkRole:[],  //勾选右侧角色
            checkUser:[],  //右边勾选的id值
            pageNumber:1,  //右边当前页数
            MenuId:-1,  //左侧点击的id
            checkMenu:[],  //点击角色以后勾选菜单
            checkRoleID:-1, //点击左侧角色id值
            userIdCheck:-1,  //点击左侧用户传过来的用户id
        }
    },
    components:{
        LeftTree,
        RightTreeCheck,
        RightTableCheck,
        LeftTable,
        LeftTreeT,
        RightTreeCheckT
    },
     methods: {
        //  单选菜单配置切换清楚菜单列表的勾选状态
         chengType(){
             this.checkMenu=[]
         },
        //  单选菜单配置切换清楚状态
         change(){
            this.checkRole=[]
         },
         //  获取点击的用户id
         UserId(val){
            //  点击左侧用户传过来的用户id
             this.userIdCheck=val
             allMenucheck({userID:val}).then((res)=>{
                this.allMentListCheck=res.Result.TreeList
                this.checkMenu=res.Result.CheckList
             })
         },
        //  左侧点击角色以后获取角色id
         getRole(val){
             this.checkRoleID=val
             RoleCheckMenu({roleID:val}).then((res)=>{
                 this.allMentListCheck=res.Result.TreeList
                 this.checkMenu=res.Result.CheckList
             })
         },
        //  左侧点击以后的菜单id
         getMenuId(val){
             this.MenuId=val
            allRolecheck({PermissionID:val}).then((res)=>{
            this.CheckRoleList=res.Result.TreeList
            this.checkRole=res.Result.CheckList
            })
            allUserCheck({permissionID:val,keyName:this.RightSerch,page:this.pageNumber,pageSize:7}).then((res)=>{
            this.CheckUserList=res.Result.Items
            this.checkUser=res.Result.CheckList
            })
         },
        //  左边的全部用户
         handleCurrentChange(val){
            allUser({keyName:this.LeftSerch,userStatu:-1,page:val,pageSize:7}).then((res)=>{
            this.allUserTable=res.Result.Items
            })
        },
        // 右边的全部用户分页
        RighthandleCurrentChange(val){
            this.pageNumber=val
            allUserCheck({permissionID:0,keyName:this.RightSerch,page:val,pageSize:7}).then((res)=>{
            this.CheckUserList=res.Result.Items
            // 分页切换也勾选
            return allUserCheck({permissionID:val,keyName:this.RightSerch,page:this.pageNumber,pageSize:7})
            }).then((res)=>{
                this.CheckUserList=res.Result.Items
                this.checkUser=res.Result.CheckList
            }).catch((error)=>{
                console.log(error)
            })
        },
        // 左边的自动搜索
        async fetchLeft(val){
            allUser({keyName:this.LeftSerch,userStatu:-1,page:1,pageSize:7}).then((res)=>{
            this.allUserTable=res.Result.Items
            })
        },
        // 右边的自动搜所
        async fetchRight(val){
            allUserCheck({permissionID:0,keyName:this.RightSerch,page:1,pageSize:7}).then((res)=>{
            this.CheckUserList=res.Result.Items
            })
        }
    },
    watch:{
        LeftSerch() {
            delay(() => {
                this.fetchLeft();
            }, 1000);
        },
        RightSerch(){
            delay(() => {
                this.fetchRight();
            }, 1000);
        }
    },
    created(){
        // 初始化左侧的所有菜单
        allMenu().then((res)=>{
            this.allMentList=res.Result
        })
        // 初始化左侧全部角色
        allRole().then((res)=>{
            this.allRoleList=res.Result
        })
        // 左侧全部用户列表
        allUser({keyName:this.LeftSerch,userStatu:-1,page:1,pageSize:7}).then((res)=>{
            this.allUserTable=res.Result.Items
            this.LeftTotal=res.Result.TotalNum
        })
        // 右侧可以勾选的菜单列表
        allMenucheck({userID:0}).then((res)=>{
            this.allMentListCheck=res.Result.TreeList
        })
        // 右侧勾选角色列表
        allRolecheck({roleID:0}).then((res)=>{
            this.CheckRoleList=res.Result.TreeList
        })
        // 右侧勾选的用户table
        allUserCheck({permissionID:0,keyName:this.RightSerch,page:1,pageSize:7}).then((res)=>{
            this.CheckUserList=res.Result.Items
            this.RightTotal=res.Result.TotalNum
        })
    }
}
</script>

<style lang="scss" scoped>
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:100px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.radioButton{
    width:98%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    padding-left:20px;  
    border-bottom: 1px solid #dcdfe6;
}
.content{
    width: 98%;
    height: 600px;
    margin: 20px auto 0;
    display: flex;
    .contnetLeft{
        flex: 1;
    }
    .contnetRight{
        flex: 1;
        border-left: 1px solid #dcdfe6;
    }
}
.block{
    text-align: right;
    margin: 20px 0 0 0;
}
</style>
